<template>
    <div>
        <div>
            <div style="position: absolute;float: left">
            <schart :canvasId="canvasId"
                    :type="type"
                    :width="width"
                    :height="height"
                    :data="data"
                    :options="options"
            ></schart>
        </div>
            <div style="position: absolute;float: left;left: 570px">
                <schart :canvasId="canvasId1"
                        :type="type1"
                        :width="width"
                        :height="height"
                        :data="data1"
                        :options="options1"
                ></schart>
            </div>
            <div style="position: absolute;float: left;left: 1100px">
                <schart :canvasId="canvasId2"
                        :type="type2"
                        :width="width"
                        :height="height"
                        :data="data2"
                        :options="options2"
                ></schart>
            </div>
        </div>

    </div>
</template>

<script>
    import Schart from 'vue-schart';
    export default {
        data(){
            return {
                aaaaa:'',
                canvasId: 'myCanvas',
                type: 'bar',
                width: 500,
                height: 400,
                data:[{
                    name:'',
                    value:1,
                }],
                options: {
                    title: '设备品牌详情',
                    bgColor: 'white',
                    titleColor: 'black',
                    legendColor: 'black'
                },

                canvasId1: 'myCanvas1',
                type1: 'pie',
                data1: [
                    {name: '', value: 0,},
                ],
                options1: {
                    title: '设备状态详情',
                    bgColor: 'white',
                    titleColor: 'black',
                    legendColor: 'black'
                },

                canvasId2: 'myCanvas2',
                type2: 'line',
                data2: [
                    {name: '华为', value: 112},
                    {name: '三星', value: 322},
                    {name: '戴尔', value: 123},
                    {name: '联想', value: 765},
                    {name: '华硕', value: 234},
                ],
                options2: {
                    title: '设备品牌',
                    bgColor: 'black',
                    titleColor: '#ffffff',
                    legendColor: '#ffffff'
                },

                canvasId3: 'myCanvas3',
                type3: 'bar',
                data3: [
                    {name: '华为', value: 112},
                    {name: '三星', value: 322},
                    {name: '戴尔', value: 123},
                    {name: '联想', value: 765},
                    {name: '华硕', value: 234},
                ],
                options3: {
                    title: '设备品牌',
                    bgColor: 'black',
                    titleColor: '#ffffff',
                    legendColor: '#ffffff'
                },


                canvasId4: 'myCanvas4',
                type4: 'pie',
                data4: [
                    {name: '华为', value: 112},
                    {name: '三星', value: 322},
                    {name: '戴尔', value: 123},
                    {name: '联想', value: 765},
                    {name: '华硕', value: 234},
                ],
                options4: {
                    title: '设备品牌',
                    bgColor: 'black',
                    titleColor: '#ffffff',
                    legendColor: '#ffffff'
                },

                canvasId5: 'myCanvas5',
                type5: 'line',
                data5: [
                    {name: '华为', value: 112},
                    {name: '三星', value: 322},
                    {name: '戴尔', value: 123},
                    {name: '联想', value: 765},
                    {name: '华硕', value: 234},
                ],
                options5: {
                    title: '设备品牌',
                    bgColor: 'black',
                    titleColor: '#ffffff',
                    legendColor: '#ffffff'
                }
            }
        },
        created(){
            this.getData();
        },
        components:{
            Schart
        },
        methods:{
            getData(){
                this.$axios.get('/text/equipment/queryequipmentbrand').then((res) => {
                    this.data=res.data.data
                });
                this.$axios.get('/text/lab/querycomputer').then((res) => {
                    this.data1=res.data.data;
                })
            },
        }
    }
</script>

<style scoped>
    .ms-doc{
        width:100%;
        max-width: 980px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    }
    .ms-doc h3{
        padding: 9px 10px 10px;
        margin: 0;
        font-size: 14px;
        line-height: 17px;
        background-color: #f5f5f5;
        border: 1px solid #d8d8d8;
        border-bottom: 0;
        border-radius: 3px 3px 0 0;
    }
    .ms-doc article{
        padding: 45px;
        word-wrap: break-word;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .ms-doc article h1{
        font-size:32px;
        padding-bottom: 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #ddd;
    }
    .ms-doc article h2 {
        margin: 24px 0 16px;
        font-weight: 600;
        line-height: 1.25;
        padding-bottom: 7px;
        font-size: 24px;
        border-bottom: 1px solid #eee;
    }
    .ms-doc article p{
        margin-bottom: 15px;
        line-height: 1.5;
    }
    .ms-doc article .el-checkbox{
        margin-bottom: 5px;
    }
</style>
